<script setup lang="ts">
import { nextKey, type ComponentOptions } from '@/widgets'
import { markRaw, onMounted, shallowRef } from 'vue'
import IASView from './IASView.vue'
import RateView from './RateView.vue'
import ClimbDescentProfile from './ClimbDescentProfile.vue'
type Props = {
  id: string
}

const props = defineProps<Props>()

type Entry = {
  name: string
  opts: Required<ComponentOptions>
}

const entries = shallowRef<Entry[]>([])
const current = shallowRef<Entry | null>(null)

function initEntries() {
  const lst: Entry[] = [
    {
      name: '速度 | 爬升',
      opts: {
        key: nextKey(),
        component: markRaw(IASView),
        props: { id: props.id, stage: 'Climb' },
        events: {}
      }
    },
    {
      name: '速度 | 巡航',
      opts: {
        key: nextKey(),
        component: markRaw(IASView),
        props: { id: props.id, stage: 'Cruise' },
        events: {}
      }
    },
    {
      name: '速度 | 下降',
      opts: {
        key: nextKey(),
        component: markRaw(IASView),
        props: { id: props.id, stage: 'Descent' },
        events: {}
      }
    },
    {
      name: '爬升率',
      opts: {
        key: nextKey(),
        component: markRaw(RateView),
        props: { id: props.id, stage: 'Climb' },
        events: {}
      }
    },
    {
      name: '下降率',
      opts: {
        key: nextKey(),
        component: markRaw(RateView),
        props: { id: props.id, stage: 'Descent' },
        events: {}
      }
    },
    {
      name: '爬升剖面',
      opts: {
        key: nextKey(),
        component: markRaw(ClimbDescentProfile),
        props: { id: props.id, stage: 'Climb' },
        events: {}
      }
    },
    {
      name: '下降剖面',
      opts: {
        key: nextKey(),
        component: markRaw(ClimbDescentProfile),
        props: { id: props.id, stage: 'Descent' },
        events: {}
      }
    }
  ]
  entries.value = lst
  current.value = lst[0]
}

onMounted(() => {
  initEntries()
})
</script>
<template>
  <div class="ac-type-view pane-block">
    <div class="row">
      <div class="menu col-8em">
        <ul class="menu-list">
          <li v-for="(e, idx) in entries" :key="idx" @click="current = e">
            <a :class="{ 'is-active': e === current }">{{ e.name }}</a>
          </li>
        </ul>
      </div>
      <div class="act-content">
        <component
          v-if="current"
          :is="current.opts.component"
          :key="current.opts.key"
          v-bind="current.opts.props"
          v-on="current?.opts.events"
        />
      </div>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/widgets/var';
.ac-type-view {
  .menu {
    padding-right: 0.75em;
    border-right: 1px solid $border;
    margin-right: 0.75em;
  }
  .act-content {
    min-width: 30em;
    min-height: 30em;
  }
}
</style>
